<template>
  <div class="c-bg-sgray">
    <div class="c-p">
      <div class="detailBg1 c-fc-white c-ph24 c-pv30">
        <div class="c-fs28 c-mb20 c-minh80 c-fw-b c-lh40">{{ dataForm.name }}</div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-mb20">
          <div class="c-flex-row c-aligni-center">
            <img class="c-ww60 c-hh60 c-mr16 c-brp50" :src="headimgurl || 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/fashou/no_login_head.png' " alt="">
            <span class="c-fs20 c-fw-b c-ww190 c-text-ellipsis1">{{ nickname }}</span>
          </div>

          <div class="c-fs20">
            结束日期：{{ dataForm.endAt }}
          </div>
        </div>
      </div>

      <div class="c-pa c-w100 c-textAlign-c c-ph24 c-p-t220 c-hh140">
        <div class="detailBg2  c-flex-row c-justify-sa c-pv24">
          <div>
            <div class="c-fs36 c-fw-b c-mb10">{{ dataForm.readUserNum || 0 }}</div>
            <div class="c-fc-gray c-fs24">发售邀请</div>
          </div>
          <div>
            <div class="c-fs36 c-fw-b c-mb10">{{ dataForm.readUserNum || 0 }}</div>
            <div class="c-fc-gray c-fs24">查看人数</div>
          </div>
          <div>
            <div class="c-fs36 c-fw-b c-mb10">{{ dataForm.joinUserNum || 0 }}</div>
            <div class="c-fc-gray c-fs24">入群人数</div>
          </div>
        </div>


        <div class="c-bg-white detailBg3 c-pv24 c-ph24 c-mt30 ">

          <div class="c-flex-row c-justify-sb c-textAlign-l c-mb30 c-aligni-center">
            <div class="c-fs24 c-fc-xblack ">被邀约人</div>
            <div class="c-flex-row ">
              <div class="c-textAlign-r c-mr24">
                <div class="c-bg-F7F8FA c-br22 c-hh48 c-flex-row c-aligni-center c-justify-center c-pv8 c-ww120 c-ph6" @click="handSelect(1)">
                  <span class="c-fs20 c-fc-xblack c-mr6">{{ readTitle }}</span>
                  <i class="iconfont icon-xiangxia  c-fs20 c-fc-gray"></i>
                </div>
              </div>
              <div class="c-textAlign-r">
                <div class="c-bg-F7F8FA c-br22 c-hh48 c-flex-row c-aligni-center c-justify-center c-pv8 c-ww120 c-ph6" @click="handSelect(2)">
                  <span class="c-fs20 c-fc-xblack c-mr6">{{ joinTitle }}</span>
                  <i class="iconfont icon-xiangxia  c-fs20 c-fc-gray"></i>
                </div>
              </div>
            </div>
          </div>


          <div v-for="(item,index) in nameList" :key="index" class="c-flex-row c-justify-sb c-mb30 c-aligni-center">
            <div class="c-w50 c-flex-row  c-aligni-center c-text-ellipsis1">
              <img class="c-ww60 c-hh60 c-mr20 c-brp50" :src="item.headimgurl"/>
              <span class="c-fs24 c-fc-xblack c-ww240 c-text-ellipsis1 c-textAlign-l">{{ item.nickname }}</span>
            </div>
            <div class="c-flex-row ">
              <div class=" c-fs24 c-mr40">
                <span :class="item.isRead==1?'c-fc-lblue':'c-fc-gray'">{{ item.isRead==1?'已查看' :'未查看'}}</span>
              </div>
              <div class=" c-fs24">
                <span :class="item.isJoinGroup==1?'c-fc-xblack':'c-fc-gray'">{{ item.isJoinGroup==1?'已加群' :'未加群'}}</span>
              </div>
            </div>
          </div>
          <div class="c-flex-column c-flex-center c-justify-center c-pv32" v-if="loadStatus == 'NO_DATA'">
            <img class="c-ww250" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/fashou/empty.png"/>
            <span class="c-fs24 c-fc-gray c-lh34" >暂无数据</span>
          </div>
          <div class="c-pt20 c-textAlign-c c-fc-gray c-fs24" v-if="loadStatus != 'NO_DATA'">{{loadStatus == 'LOADING' ? '加载中...' : '我是有底线的'}}</div>
        </div>
      </div>
    </div>
    <!-- 底部内容 未关注公众号 -->
    <div v-if="officialIsShow==1" class="c-pf c-w100 c-p-b0" >
      <div class="c-flex-row c-ph24  c-hh80 c-w100 c-justify-sb c-aligni-center c-pv20 c-bg-3469EA07">
        <div class="c-fs22 c-fc-white c-fw-b">关注公众号，实时查看邀约数据</div>
        <div class="c-fs22 c-fc-lblue c-br32 c-ph24 c-bg-white c-fw-b c-hh48 c-flex-row c-aligni-center" @click="goToFollow">立即关注</div>
      </div>
    </div>
    <FollowOffiaccount :showOffaccountQr.sync="showOffaccountQr" title="关注公众号，实时查看邀约数据"
      :officialAccountQrCode="officialAccountQrCode" />


    <!-- 底部弹窗选择--自己写 -->
    <open-modal :openModal="selectListShow" @closeModal='selectListShow=false'>
      <article class="c-bg-white c-br-tl10 c-br-tr10 c-pb20 c-pt20">
        <div v-for="item in selectArr" :key="item.value" class="c-w100 c-textAlign-c c-lh70 c-fs24" @click="choose(item)">
          <span :class="item.value == selectId ? 'c-fc-lblue':''">{{ item.name }}</span>
        </div>
      </article>
    </open-modal>

  </div>
</template>

<script>
import FollowOffiaccount from "@/components/templates/fashou/followOffiaccount.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common.js";
export default {
  components:{
    FollowOffiaccount,
    OpenModal
  },

  props:{},

  data() {
    return {
      headimgurl: localStorage.getItem("userHeadImg"),
      nickname: localStorage.getItem("userName"),
      officialIsShow: 0, //1显示 0不显示
      officialAccountQrCode:'',
      isCompanyExpired: 0, // // 0 未过期 1-过期
      dataForm:null,
      loadStatus:'LOAD_MORE',
      nameList:[],
      showOffaccountQr:false,
      selectListShow: false,
      readTitle: '全部',
      joinTitle: '全部',
      isRead: 2,
      isJoinGroup: 2,
      type:1,
      selectId: '',
      selectArr: [],
      action: [
        { name: '全部', value: 2 },
        { name: '已查看', value: 1},
        { name: '未查看', value: 0}
      ],
      joinActions: [
        { name: '全部', value: 2},
        { name: '已入群', value: 1},
        { name: '未入群', value: 0}
      ]
    }
  },
  created() {
    this._id = this.$route.query.id;
    this.isCompanyExpired = localStorage.getItem('isCompanyExpired') || '-2';
    this._page = 1;
    setDocumentTitle('数据详情');
    this.getDataDetail();
    this.getList();
    this.wechatShare();
    this.getOfficialAccountQrCode();

  },
  mounted() {
     window.addEventListener('scroll', this.windowScrollFunction);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },

  methods:{
    getOfficialAccountQrCode() {
      utilJs.getMethod(`${global.apiurl}fashou/officialAccountQrCode`, res => {
        this.officialIsShow = res.isShow;
        this.officialAccountQrCode = res.authorizerInfo.mpQrCodeUrl;
       });
    },
    choose(item) {
      if (this.type == 1) {
        this.isRead = item.value;
        this.readTitle = item.name;
      } else {
        this.isJoinGroup = item.value;
        this.joinTitle = item.name;
      }
      this.selectId = this.type == 1 ? this.isRead : this.isJoinGroup;
      this.selectListShow = false;
      this._page = 1;
      this.getList();
    },
    handSelect(val) {
      this.type = val;
      this.selectId = '';// 先置空--再赋值
      this.selectArr = val == 1 ? this.action : this.joinActions;
      this.selectId = val == 1 ? this.isRead : this.isJoinGroup;
      this.selectListShow = true;
    },
    getDataDetail() {
       utilJs.getMethod(global.fashouApiUrl + `releaseCloud/dataDetail?id=${this._id}&isSkeleton=1`, res => {
        if (res.errorCode == 1 || res.activityStatus == -1) {
         this.showDownTip();
          return;
        }
        this.dataForm = res;
       });
    },
    getList() {
       if (this.loadStatus == 'LAODING') {
        return;
      }
      this.loadStatus = 'LAODING';
      let isRead = this.isRead != 2 ? this.isRead : '';
      let isJoinGroup = this.isJoinGroup != 2 ? this.isJoinGroup : '';
      let dataQuery = `id=${this._id}&isRead=${isRead}&isJoinGroup=${isJoinGroup}&page=${this._page}&limit=10`
      utilJs.getMethod(global.fashouApiUrl + `releaseCloud/inviteList?${dataQuery}`, res => {
         if (res.errorCode == 1 || res.activityStatus == -1) {
         this.showDownTip();
          return;
        }
        let list = res.data;
        this.nameList = this._page == 1 ? list : [...this.nameList, ...list];
        if (!this.nameList.length) {
          this.loadStatus = 'NO_DATA';
          return;
        }
        if (list.length < 10) {
          this.loadStatus = 'NO_MORE_DATA';
          return;
        }
        this._page++;
        this.loadStatus = 'LOAD_MORE';
      })
    },
    showDownTip() {
      this.$cjConfirm({
        title: '提示', //
        message: '该活动已被下架',
        showCancelButton:false,
        confirmButtonText:'我知道了！',
        onConfirm:() => {
          this.$routerGo(this, "replace", { path: `/fashou/activity` });
        },
      })
    },
    goToFollow() {
      this.showOffaccountQr = true;
    },
     windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.loadStatus == 'LOAD_MORE' && this.nameList.length) {
          this.getList();
        }
      });
    },
    wechatShare() {
      let title = '发售列表';
      let desc = '点击查看';
      let shareUrl = `${window.location.href.split("#")[0]}#/fashou/activity`;
      let imgUrl = 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/14_material_admin/image/public/images/fashou/shareBg.png';
      utilJs.wechatConfig(shareUrl, title, imgUrl, desc, function () { });
    },
  },

}
</script>